<template>
 <div>
    <fou-dialog :title="'未點名名單'" v-model:dialogValue="dialog" :width="'75%'" >
        <template #content>
    <!-- 搜索導航 -->
    <el-form inline>
      <el-form-item>
        <el-date-picker v-model="screenFrom.time" value-format="YYYY-MM-DD" arrow-control type="daterange"
          range-separator="至" start-placeholder="開始日期" end-placeholder="截止日期" size="small">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-input v-model="screenFrom.name" placeholder="學生名稱 教練名稱" size="small"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button color="#081F42" @click="getTableList()" size="small">確定</el-button>
      </el-form-item>
    </el-form>
             <ProTable
                :data="tableData"
                :page="page"
                :column="column"
                :rowControl="[]"
                :elProps="elProps"
                :disabled="[]"
                :controlWidth="controlWidth"
                @page-change="onPageChange"
                @pageRefresh="pageRefresh"
                
                >
                <!-- <template #default="{ row, propname }"> -->
                    <!-- <div  v-if="propname === 'school' || propname === 'cate' ">
                          {{row[propname] && row[propname].name ? row[propname].name : row[propname]}}
                    </div> -->
                <!-- </template> -->
                <template #search_operate>
                    <el-table-column  fixed="right" width="200px" label="操作">
                        <template #default="scope">
                            <el-link :underline="false" type="primary"  @click="handleSelect(scope.row,scope.$index )" >選擇</el-link >
                        </template>
                    </el-table-column>
                </template>
                </ProTable>
        </template>


    </fou-dialog>
    <DioUser ref="dioUser" @update="handleDioSub"></DioUser>

 </div>
</template>

<script setup>
import {ref,reactive} from 'vue'
import {getAppeared,classroomEdit} from '@/http/index.js'
import {elProps,controlWidth} from './index.js'
import {message,loading,closeLoading} from '@/common/function.js'
import DioUser from './DioUser.vue'
const dialog = ref(false)
const column = {
    state:"狀態",
    create_time:'課程時間',
    name:'課程名稱',
    student_name:'學生名稱',
    teacher_name:'導師',
    num:'上課人數',
    hour:'課堂時長',
}
const screenFrom = reactive({
          name: '',
          time: '',
          page:'',
          limit:'',
          school_id:localStorage.getItem('school_id')
        })
const page = reactive({page: 1,limit: 10,total: 10,page_size: [10, 20, 30]})
const onPageChange = async({ e, type }) => {
  if (type == "current") {
    page.page = e;
  }
  if (type == "size") {
    page.page = 1
    page.limit = e;
  }
  getTableList()
};
const init = async ()=>{
    dialog.value =  true
    getTableList()
}
const tableData = ref([])
const getTableList = async()=>{
    let obj = Object.assign(screenFrom,page)
    delete obj.total
    const data = await getAppeared(obj)
    if (data.code == 200) {
    loading()
        tableData.value = data.data.data
        page.total = data.data.total
        closeLoading()
    }
}
const dioUser = ref('')
const editData = ref({})
const handleSelect = (data, index)=>{
      dioUser.value.init(data, index);
      editData.value = data
}
const handleDioSub = (data)=>{
        let {
          params,
          index
        } = data;
       let a = [Object.assign(editData.value, params)]
        determineEdit(a)
}
const determineEdit = async(value)=>{
  let obj = {
          remark:'',
          student:[],
          school_id:localStorage.getItem('school_id')
        }
        console.log(value);
        obj.student = value.map(v=>{
          let defaultObj = {
            state: v.state,
            student_id: v.student_id,
            classStudentid: v.classtime_id,
          }
          switch (v.state) {
            case '遲到':
              defaultObj.lastMin = v.lastMin;
              break;
            case '調堂':
              defaultObj.course_id = v.course_id,
              defaultObj.admin_id = v.admin_id;
              defaultObj.classroom_id = v.classroom_id;
              defaultObj.end_time = v.end_time;
              defaultObj.start_time = v.start_time;
              // defaultObj.maxNumber = v.maxNumber;
              break;
          }
        return defaultObj
        })
        console.log(obj);
        const data = await classroomEdit(obj)
        if (data.code == 200) {
          message('修改成功')
              getTableList()
        }else{
          message(data.response.data.message,'warning')
        }
}
const pageRefresh = ()=>{
    loading()
    page.page = 1
    page.limit = 10
    getTableList()
}
defineExpose({
    init
})
</script>

<style scoped lang='less'>

</style>